<template>
	<view class="home">
		<!-- 自定义导航栏 -->
		<navbar></navbar>
		<!-- 自定义选项卡 -->
		<tab :list="tab_list" @tab="tab"></tab>
		<!-- 内容滚动区 DOTO （组件样式乱码，没封存）-->
		<view class="scroll">
			<scroll-view scroll-y="true" class="list-scroll">
				<!-- 内容最好在标签内包裹 -->
				<view>
					<view v-for="(item,index) in 100" :key="index">
						-我是第{{item}}内容
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	
</template>

<script>
	// easyCom components/组件名/组件名.vue 局部引入
	// import navbar from '@/components/navbar/navbar.vue'
	export default {
		// components:{
		// 	navbar
		// },
		data() {
			return {
				title: 'Hello',
				tab_list: []
			}
		},
		onLoad() {
			this.getLabel()
		},
		methods: {
			// 之定义事件处理函数
			tab({
				data,
				index
			}) {
				console.log(data, index)
			},

			// 获取数据的处理函数
			getLabel() {

				this.$api.get_label({
					name: 'get_label'
				}).then(res => {
					const {
						data
					} = res
					this.tab_list = data
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		display: flex;
	}
	.home {
		display: flex;
		flex-direction: column;
		flex:1;
		.scroll {
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			.list-scroll {
				height: 100%;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>
